<template>
  <el-container>
    <el-header style="font-size: 24px">日志列表</el-header>
    <el-main>
      <el-row>

        <el-form ref="searchForm" label-width="100px">

          <el-col :span="8">
            <el-form-item label="日志类型">
              <el-input v-model="logType" placeholder="日志类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人">
              <el-input v-model="userName" placeholder="操作人"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-col>

        </el-form>


      </el-row>
      <el-table :data="tableData" style="width: 100%" border >
        <el-table-column prop="id" label="序号" align="center" width="100"></el-table-column>
        <el-table-column prop="logType" label="日志类型" align="center"  width="400"></el-table-column>
        <el-table-column prop="logDesc" label="日志描述" align="center" width="400"></el-table-column>
        <el-table-column prop="userName" label="操作人" align="center" width="350"></el-table-column>
        <el-table-column prop="createTime" label="操作时间" align="center" width="400"></el-table-column>


        <!--
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        -->
      </el-table>
      <el-row>
        <el-col :span="16">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
          </el-pagination>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';

const API_URL = 'http://60.205.189.235:90/api/v1/log'
export default {
  data() {
    return {
      logType:'',
      userName:'',
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      tableData: [],
    };
  },
  methods: {
    handleSearch() {
      this.currentPage = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    async getList() {
      const response = await axios.post(API_URL+'/list', {
        logType:this.logType,
        userName:this.userName,
        //page: this.currentPage - 1,
        page: this.currentPage,
        size: this.pageSize,
      });
      this.tableData = response.data.content;
      this.totalCount = response.data.totalElements;
    },
    async exportExcel() {
      const filename = '分析报表一.xlsx';
      const url = `/public/excel/export/${filename}`;
      fetch(url)
          .then((response) => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.blob();
          })
          .then((blob) => {
            handleDownload(blob, filename);
          })
          .catch((error) => {
            console.error('Error downloading file:', error);
          });
    },
    handleEdit(row) {
      this.$router.push({name: 'edit', params: {id: row.id}});
    },
    handleDelete(row) {
      this.$confirm('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios.delete(`/api/delete/${row.id}`).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功！',
          });
          this.getList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  },
  created() {
    this.getList();
  },
};

// 通用下载方法
const handleDownload = (blob, filename) => {
  if (!(blob instanceof Blob)) {
    console.error('Invalid blob object provided.');
    return;
  }
  console.log('Handling download with blob:', blob); // 添加调试信息
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link.href); // 清理对象 URL
};
</script>